<template>
  <view class="home flex column">
    <view class="flex u-row-center u-row-around u-col-center networked-sub">
      <view @click="goTo('1')" class="sub-text sub-text-normal u-flex-col u-col-center u-row-center t-white">
        <view>
          <text class="u-m-b-10 u-font-40 f-bold">{{topData.allCount}}</text>
          <text>人</text>
        </view>
        <text class="u-font-15">下井人员</text>
      </view>
      <view @click="goTo('2')" class="sub-text sub-text-abnormal u-flex-col u-col-center u-row-center t-white">
        <view>
          <text class="u-m-b-10 u-font-40 f-bold">{{topData.leaderCount}}</text>
          <text>人</text>
        </view>
        <text class="u-font-15">带班领导</text>
      </view>
      <view @click="goTo('3')" class="sub-text sub-text-dis u-flex-col u-col-center u-row-center t-white">
        <view>
          <text class="u-m-b-10 u-font-40 f-bold">{{topData.specialCount}}</text>
          <text>人</text>
        </view>
        <text class="u-font-15">特种作业人员</text>
      </view>
    </view>
    <scroll-view :scroll-y="true" class="container item one">
      <template v-if="list && list.length">
        <view class="card-box">
          <u-card
            class="card"
            :border="false"
            box-shadow="0px 0px 8px #ddd6d6"
            :show-head="false"
            :show-foot="false"
            margin="20rpx"
            :body-style="{ padding: '10rpx 30rpx', height:'100%'}"
            v-for="(item, index) in list"
            :key="index"
            @click="goTo('6',item,index)"
          >
            <view slot="body" class="h-100p">
              <view class="card-row h-100p t-title u-flex-col u-row-center u-col-center">
                <view class="u-m-b-10">
                  <text class="u-m-b-10 u-font-40">{{item.details.length}}</text>
                  <text>人</text>
                </view>
                <view class="u-font-15 f-bold">{{ item.areaName }}</view>
              </view>
            </view>
          </u-card>
        </view>
      </template>
      <template v-if="showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty text="暂无数据"></u-empty>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'location',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      searchData: {
        mineNo: ''
      },
      topData: {}, //顶部数据
      list: [], //下方列表
      triggered: false, // 下拉刷新
      showEmpty: false
    }
  },
  mounted() {
    this.searchData.mineNo = this.data.enCode
    this.getData()
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.showEmpty = false
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$post('/mobile/environmentMonitor/ryssDataList', this.searchData)
      if (res && res.body.ryssCount) {
        this.topData = res.body.ryssCount
      }
      if (res && res.body.ryssData) {
        this.list = res.body.ryssData
        // 数据空
        if (this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    goTo(id, item, index) {
      let name = ''
      if (id === '1') {
        name = '下井人员'
      } else if (id === '2') {
        name = '带班领导'
      } else if (id === '3') {
        name = '特种作业人员'
      } else if (id === '4') {
        name = '人脸识别成功'
      } else if (id === '5') {
        name = '人脸识别失败'
      } else if (id === '6') {
        name = item.areaName ? item.areaName : ''
      }
      uni.navigateTo({
        url: `/pages/workbench/onlineMonitoring/components/personList?id=${id}&name=${name}&index=${index}&mineNo=${this.data.enCode}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .title {
    background: #aeb0b3;
    height: 80rpx;
    margin-top: 20rpx;
  }
  .face {
    border-radius: 16rpx;
    width: 48%;
    height: 140rpx;
    &-one {
      background-color: #ecf5f0;
    }
    &-two {
      background-color: #fdebe9;
    }
    &-bg {
      width: 80rpx;
      height: 80rpx;
      &-one {
        background: url('/static/image/face_recognition_success.svg') no-repeat 100% 100%/100% 100%;
      }
      &-two {
        background: url('/static/image/face_recognition_error.svg') no-repeat 100% 100%/100% 100%;
      }
    }
  }
  .card-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20rpx;
    .card {
      height: 180rpx;
      .card-row {
        font-weight: 500;
      }
    }
  }

  .networked-sub {
    padding: 15px 10px;
    .sub-text {
      width: 30%;
      height: 140rpx;
    }
    .sub-text-normal {
      background: url('/static/image/location_downhole_personnel.svg') no-repeat 100% 100%/100% 100%;
    }
    .sub-text-abnormal {
      background: url('/static/image/location_leader.svg') no-repeat 100% 100%/100% 100%;
    }
    .sub-text-dis {
      background: url('/static/image/location_special.svg') no-repeat 100% 100%/100% 100%;
    }
  }
}
</style>
